<template>
	<view>
		<view class="searchPP">
			<image @click="goBackM" style="width: 0.6rem;height: 1rem;padding: 0rem 0.5rem 0rem 0rem;" src="../../style/image/cargo/leftarow.jpg"
			 alt="">
				<view class="searchP">
					<view class="search" :style="{ width: '100%' }">
						<u-search placeholder="请输入您要搜索的网点名称或电话" shape="round" v-model="keyword" :show-action="false" @search="searchWD"></u-search>
					</view>
				</view>
		</view>
		<u-empty style="margin-top: 3rem;" v-if="showDatasList.length==0 && !isLoading" text="暂无数据" mode="data"></u-empty>
		<u-swipe-action v-for="(item,index) in showDatasList" :show="item.show" :key="item.id" :index="index" @click="swipeClick"
		 @open="swipeOpen" :options="options">
			<view class="showDatsC">
				<view class="" style="border-bottom: 1px solid #e8e8e8;">
					<view class="prolifyP">
						<!-- <view @click="selectClickM(item,index)" class="Icon-bottom">
							<image v-if="item.select == false" style="width: 1rem; height: 1rem" src="../../style/image/cargo/round.png" alt="" />
							<image v-else style="width: 1rem; height: 1rem" src="../../style/image/cargo/selectRound.png" alt="" />
						</view>		 -->	
						<view style="">
							<view style="color:rgb(0, 0, 0);font-size: 0.72rem;font-family: PingFang SC;font-weight: 300;color: #666666;margin-bottom: 0.1rem;">
								{{item.branchName}}
							</view>
							<view style="font-size: 0.72rem; font-family: PingFang SC; font-weight: 300; color: #333333; width: 13rem;overflow: hidden;
										 text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;">
								{{item.address}}
							</view>
						</view>
						<view @click="goCargoM(item)" class="cargoBtn">去铺货</view>
					</view>
				</view>
			</view>
		</u-swipe-action>

		<view class="footP">
			<view @click="addWM" style="padding: 0.7rem;display: flex;align-items: center;">
				<image style="width: 1rem;height:1rem" src="../../style/image/cargo/add.jpg" alt="">
					<view style="color: white;margin-left: 0.2rem;">添加新网点</view>
			</view>
		</view>
	</view>

</template>

<script lang='ts'>
	import {
		Component,
		Prop,
		Vue,
		Watch,
		Emit
	} from "vue-property-decorator";
	import {
		saveShopBranch,
		findBranchSite
	} from "../../utils/uniApi";
	import {
		findShopBranch,
		distribution
	} from "../../utils/uniApi";

	import {
		AppModule
	} from '../../store/modules/app'

	@Component({
		//   @Component  是一个装修器   不可以在下面写语句
		name: "test",
	})
	export default class extends Vue {
		@Prop({
			type: String, // 父组件传递给子组件的数据类型
			required: false, // 是否必填
			default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
		})
		msg!: string;
		
		public isLoading = false; //是否加载中
		public snList: any = []; //设备sn的list
		public shopId: any = ''; //商户id
		public fatherPage: any = ''//父级入口
		public fatherList: any = ''//父级item

		public keyword = ""; //搜索关键字
		public showDatasList: any = []; //数据list
		public pageN: any = 1;//分页的页数
		public  status='more'
		public  contentText={
			contentdown: '下拉或点击查看更多',
			contentrefresh: '加载中',
			contentnomore: '没有更多'
		}
		public continueTypes = true;

		public options = [{
				text: "编辑",
				style: {
					backgroundColor: "#007aff",
				},
			},
			{
				text: "删除",
				style: {
					backgroundColor: "#dd524d",
				},
			},
		];

		created() {

		}

		onLoad(options: any) {
			if (options.data) {
				var dic = JSON.parse(options.data)
				this.snList = dic.snlist
				this.shopId = dic.shopId
				this.fatherPage = dic.type
				this.fatherList = dic.list
				uni.setStorage({
					key: "selectWDic",
					data: dic,
					success: function() {},
				});
			} else {
				var dic = uni.getStorageSync("selectWDic");
				this.snList = dic.snlist
				this.shopId = dic.shopId
				this.fatherPage = dic.type
				this.fatherList = dic.list
			}
		}
		
		onHide() {
			uni.hideLoading();
		}
		//下拉刷新
		onPullDownRefresh() {
		    setTimeout(function () {
				uni.redirectTo({
					url: "../../pages/cargo/selectW",
				});
				uni.stopPullDownRefresh();
		    }, 1000);
		}
		//上拉加载更多
		onReachBottom() {
			if(!this.continueTypes){
				return
			}
		    this.pageN = this.pageN + 1;
		    this.findShopBranch(this.keyword, this.pageN)
		}
		clickLoadMore(){
			this.onReachBottom()
		}

		
		mounted() {
			this.findShopBranch(this.keyword, this.pageN)
		}
		//网络获取网点信息
		findShopBranch(keyword: any, pageSize: any) {
			this.isLoading = true
			uni.showLoading({
				title: "加载中",
			});
			let params = {
				userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
				shopId: this.shopId, //商户ID
				branchName: keyword, //网点名称搜索
				pageNo: pageSize,
				pageSize: "20",
			};

			findShopBranch(params).then((res: any) => {
				this.isLoading = false
				// console.log("输出参数值："+JSON.stringify(res.data))
				uni.hideLoading();
				if (res.data.code == 200) {
					var boolee = res.data.hasNext == false && this.continueTypes == false;
					if (res.data.hasNext == true) {
					  this.status = "more";
					} else {
					  this.status = "noMore";
					}
					if (res.data.isFirst || !boolee) {
						if (res.data.hasNext == false) {
						  this.continueTypes = false;
						}
						if(this.showDatasList.length>0 && this.pageN==1){//搜索  删除已有数据
						  this.showDatasList = [];
						}
						res.data.data.filter((item: any, index: any) => {
							item.show = false
							this.showDatasList.push(item);
						});
					}
					
					// if (this.showDatasList.length > 0 && this.pageN == 1) { //搜索时清除已有数据  如果有分页 需在考虑
					// 	this.showDatasList = [];
					// }
					// res.data.data.filter((item: any, index: any) => {
					// 	item.show = false
					// 	this.showDatasList.push(item);
					// });
				} else {
					uni.showToast({
						title: '数据加载失败',
						icon: 'none',
						duration: 2000
					});
				}

			});
		}

		//搜索框
		searchWD(value: any) {
			this.keyword = value
			this.pageN = 1
			this.findShopBranch(this.keyword, this.pageN)
		}
		//添加新网点
		addWM() {
			var dic = {
				snlist: this.snList,
				shopId: this.shopId
			}
			uni.navigateTo({
				url: "./cargoWEdit?data=" + encodeURIComponent(JSON.stringify(dic)),
			});
		}

		swipeClick(index: any, index1: any) {
			if (index1 == 1) { //删除
				uni.showLoading({
					title: "加载中",
				});
				let params = {
					id: this.showDatasList[index].id, //网点ID(新增无ID,编辑有ID)
					del: "1", //		是否删除（删除操作传入 1 删除）
				};
				saveShopBranch(params).then((res: any) => {
					uni.hideLoading();
					console.log("返回结果:" + JSON.stringify(res.data))
					if (res.data.code == 200) {
						this.showDatasList.splice(index, 1);
						uni.showToast({
							title: "删除成功",
							icon: 'none',
							duration: 2000
						});
					} else {
						uni.showToast({
							title: "删除失败",
							icon: 'none',
							duration: 2000
						});
					}
				})
			} else if (index1 == 0) { //编辑
				uni.navigateTo({
					url: "./cargoWEdit?WDDic=" + encodeURIComponent(JSON.stringify(this.showDatasList[index])),
				});
			}
		}

		// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
		swipeOpen(index: any) {
			// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
			// 原本为'false'，再次设置为'false'会无效
			this.showDatasList[index].show = true;
			this.showDatasList.map((val: any, idx: any) => {
				if (index != idx) this.showDatasList[idx].show = false;
			})
		}

		//返回按钮事件
		goBackM() {
			uni.navigateBack({
			  delta: 1,
			});
		}
		
		//铺货
		goCargoM(item:any) {
			if(this.fatherPage == "charger"){//充电线铺货跳转备注
				var dic = {list:this.fatherList,snlist:this.snList,webId:item.id}
				uni.navigateTo({
					url: "../usb/setModule?data=" + encodeURIComponent(JSON.stringify(dic)),
				});
			}else{//
				uni.showLoading({
					title: "加载中",
				});
				let params = {
					userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
					snList: JSON.stringify(this.snList),
					shopBranchId: item.id, //商户网点ID
				}
				distribution(params).then((res: any) => {
					uni.hideLoading();
					console.log("铺货返回结果:" + JSON.stringify(res.data))
					if (res.data.code == 200) {
						uni.showToast({
							title: "铺货成功",
							icon: 'none',
							duration: 2000
						});
						uni.navigateBack({
						  delta: 2,
						});
					} else {
						uni.showToast({
							title: "铺货失败",
							icon: 'none',
							duration: 2000
						});
					}
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.searchPP {
		background-color: white;
		padding: 0.5rem;

		display: flex;
		align-items: center;
		border-bottom: 1px solid #e8e8e8;
	}

	.searchP {
		background-color: white;
		display: flex;
		width: 100%;
		justify-content: space-between;
	}

	.prolifyP {
		display: flex;
		padding: 0.8rem 1rem;
		justify-content: space-between;
		align-items: center;
	}

	/* 加上标签 或者加上>   */
	.agentprolify {
		display: flex;
		align-items: center;
		padding: 0.8rem 1rem;
	}

	.agentprolify :first-child {
		font-size: 0.72rem;
		font-family: "PingFang SC";
		font-weight: 300;
		color: #666666;
	}

	.agentprolify> :nth-child(1) {}

	.agentprolify> :nth-child(2) {
		color: red;
	}

	.cargoBtn {
		background: #02af74;
		border-radius: 0.2rem;
		padding: 0.2rem;
		color: white;
	}

	.footP {
		position: absolute;
		bottom: 0;
		background-color: #02af74;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>
